<template>
  <div>
    <!--      interval设置图片自动轮放时间，单位毫秒  -->
    <el-carousel :interval="3000" type="card" height="250px" indicator-position="outside">
      <el-carousel-item v-for="image in images">
        <img :src="image" class="image">
      </el-carousel-item>
    </el-carousel>

    <div>
      <div>
        <el-row :gutter="30">
          <el-col :span="11">
            <el-card shadow='hover' style="height: 335px;margin-left: 30px; background-color: #afdfe4;">
              <div>
                <el-avatar :size="150" :src=admin.avatarUrl></el-avatar>
                <div style="margin-left: 40px;">
                  <p><span>{{ admin.username }}</span></p>
                  <p><span>{{ admin.name }}</span></p>
                </div>
              </div>
              <div style="margin-left: 30px; margin-top: 5xp; font-style: italic;">
                <p>欢迎使用本系统！</p>
              </div>
            </el-card>
          </el-col>
          <el-col :span="13" >
            <el-card shadow='hover' style="height: 335px; background-color: #afdfe4;">
              <el-calendar v-model="value">
              </el-calendar>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      images: [
        require("../assets/runPic/1.jpg"),
        require("../assets/runPic/2.jpg"),
        require("../assets/runPic/3.jpg"),

      ],
      value: new Date(),
      admin: localStorage.getItem("admin") ? JSON.parse(localStorage.getItem("admin")) : {},
    }
  }
}
</script>

<style scoped>
.image {
  width: 100%;
  display: block;
}

/* .test /deep/ .el-calendar-table .el-calendar-day{
    height: 40px;
  } */
</style>